import {createApp} from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/display.css'
import scui from './scui'
import i18n from './locales'
import router from './router'
import store from './store'
import App from './App.vue'
import SvgIcon from "@/components/flowable/SvgIcon/index.vue"

const app = createApp(App);
// 状态机
import pinia from "./store/flowable";

app.use(pinia);

// arco
// 完整引入
import ArcoVue from "@arco-design/web-vue";
import "@arco-design/web-vue/dist/arco.css";

app.use(ArcoVue);

import VueUeditorWrap from 'vue-ueditor-wrap';
app.use(VueUeditorWrap);
// 其他主题
// import "@arco-themes/vue-gi-demo/css/arco.css";
// import "@arco-themes/vue-digitforce/css/arco.css";
// 按需加载，下面的组件样式需手动引入
import "@arco-design/web-vue/es/message/style/css";
import "@arco-design/web-vue/es/notification/style/css";
import "@arco-design/web-vue/es/modal/style/css";

// arco图标库
// import ArcoVueIcon from "@arco-design/web-vue/es/icon";
// app.use(ArcoVueIcon);

// 拖拽滚动组件
import Vue3Dragscroll from "vue3-dragscroll";

app.use(Vue3Dragscroll);

// 流程组件
import AddNode from "@/components/flowable/flow/AddNode.vue";
import NodeWrap from "@/components/flowable/flow/NodeWrap.vue";
import FlowNodeWrap from "@/components/flowable/flowModel/flowNodeWrap.vue";
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

// app.use("AddNode", AddNode);
// app.use("NodeWrap", NodeWrap);
app.component("AddNode", AddNode);
app.component("NodeWrap", NodeWrap);
app.component("FlowNodeWrap", FlowNodeWrap);

// import SvgIcon from "@/components/flowable/SvgIcon/index.vue";
// app.component("SvgIcon", SvgIcon);

// focus指令
app.directive("focus", {mounted: (el, binding, vnode, prevVnode) => el.focus()});

//JSON
import JsonViewer from "vue-json-viewer"

app.use(JsonViewer)

import CircularJSON from 'circular-json'
app.use(CircularJSON);

// 全局样式
import "@/style/flowable/index.less";
import db from "@/utils/db";

app.use(store);
app.use(ElementPlus);
app.use(i18n);
app.use(scui);

app.component(SvgIcon);

app.component('QuillEditor', QuillEditor)

app.use(router);

await db.create();
//挂载app
app.mount('#app');


/**
 * 以下代码解决报错: ResizeObserver loop completed with undelivered notifications.
 */
const debounce = (fn, delay) => {
    let timer
    return (...args) => {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            fn(...args)
        }, delay)
    }
}

const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
    constructor(callback) {
        callback = debounce(callback, 10);
        super(callback);
    }
}
